<template>
  <div class="pet-knowledge-article">
    <!-- 页面头部 -->
    <header class="article-header">
      <button @click="goBack" class="back-button">
        <span class="pixel-icon">⬅</span> 返回
      </button>
      <h1 class="article-title">{{ article.title }}</h1>
    </header>

    <!-- 文章内容 -->
    <main class="article-content">
      <div class="article-meta">
        <span class="category-tag">{{ getCategoryName() }}</span>
        <span class="publish-date">{{ formatDate(article.publishDate) }}</span>
        <span class="read-count">阅读: {{ article.readCount }}</span>
      </div>

      <!-- 文章主图 -->
      <div class="article-main-image">
        <img :src="article.mainImage" :alt="article.title" class="pixel-border">
      </div>

      <!-- 文章正文 -->
      <div class="article-body" v-html="article.content"></div>

      <!-- 温馨提示 -->
      <div class="article-tips pixel-border">
        <h3 class="tips-title">💡 温馨提示</h3>
        <p class="tips-content">本文内容仅供参考，如有宠物健康问题，请及时咨询专业兽医。</p>
      </div>

      <!-- 相关文章 -->
      <div class="related-articles">
        <h3 class="related-title">📚 相关推荐</h3>
        <div class="related-list">
          <div v-for="related in relatedArticles" :key="related.id" class="related-item pixel-border">
            <router-link :to="`/pet-knowledge/article/${related.id}`" class="related-link">
              <img :src="related.thumbnail" :alt="related.title" class="related-image">
              <div class="related-info">
                <h4 class="related-item-title">{{ related.title }}</h4>
                <span class="related-date">{{ formatDate(related.publishDate) }}</span>
              </div>
            </router-link>
          </div>
        </div>
      </div>
    </main>

    <!-- 底部操作栏 -->
    <footer class="article-footer">
      <div class="action-buttons">
        <button class="action-button like-btn">
          <span class="pixel-icon">👍</span> 点赞 ({{ article.likes }})
        </button>
        <button class="action-button collect-btn">
          <span class="pixel-icon">⭐</span> 收藏
        </button>
        <button class="action-button share-btn">
          <span class="pixel-icon">🔗</span> 分享
        </button>
      </div>
    </footer>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()
const articleId = route.params.id

// 文章数据
const article = ref({
  id: articleId,
  title: '',
  categoryId: '',
  publishDate: '',
  readCount: 0,
  likes: 0,
  mainImage: '',
  content: ''
})

// 相关文章
const relatedArticles = ref([])

// 知识分类
const categories = [
  { id: 'diet', name: '饮食营养' },
  { id: 'health', name: '健康医疗' },
  { id: 'training', name: '训练指南' },
  { id: 'behavior', name: '行为习惯' },
  { id: 'care', name: '日常护理' },
  { id: 'breed', name: '品种特性' }
]

// 模拟文章数据
const mockArticles = {
  '1': {
    id: '1',
    title: '金毛寻回犬的日常护理指南',
    categoryId: 'care',
    publishDate: '2024-01-15T10:30:00',
    readCount: 2548,
    likes: 324,
    mainImage: 'https://picsum.photos/seed/golden1/800/450',
    content: `
      <h2>一、金毛寻回犬的基本特点</h2>
      <p>金毛寻回犬是一种友好、可靠、值得信赖的犬种，它们通常很活跃，喜欢与人互动。金毛犬性格温顺，对孩子非常友好，是理想的家庭宠物。</p>
      
      <h2>二、日常梳理与清洁</h2>
      <p>金毛犬拥有浓密的双层被毛，需要定期梳理以保持清洁和健康：</p>
      <ul>
        <li>每周至少梳理2-3次，去除死毛和防止打结</li>
        <li>在换毛季节（春秋）需要增加梳理频率</li>
        <li>定期洗澡，但不要过于频繁（每4-6周一次为宜）</li>
        <li>使用适合狗狗的专业洗浴产品</li>
      </ul>
      
      <h2>三、饮食管理</h2>
      <p>金毛犬的饮食需要特别注意，以避免肥胖问题：</p>
      <ul>
        <li>选择高质量的犬粮，根据年龄、体重和活动量调整食量</li>
        <li>避免喂食人类食物，特别是巧克力、洋葱等有毒食物</li>
        <li>提供充足的清洁饮用水</li>
        <li>定期监测体重，防止肥胖</li>
      </ul>
      
      <h2>四、运动与锻炼</h2>
      <p>作为一种活跃的犬种，金毛犬需要充足的运动：</p>
      <ul>
        <li>每天至少需要30-60分钟的中等强度运动</li>
        <li>可以进行散步、跑步、游泳等活动</li>
        <li>提供足够的玩具，保持其活跃性和智力刺激</li>
        <li>注意在炎热天气避免过度运动</li>
      </ul>
      
      <h2>五、健康检查</h2>
      <p>定期带金毛犬进行健康检查非常重要：</p>
      <ul>
        <li>每年至少进行一次全面的兽医检查</li>
        <li>按时接种疫苗和进行驱虫</li>
        <li>注意观察常见健康问题，如髋关节发育不良、眼睛问题等</li>
        <li>定期清洁耳朵和修剪指甲</li>
      </ul>
    `
  },
  '2': {
    id: '2',
    title: '猫咪常见健康问题及预防措施',
    categoryId: 'health',
    publishDate: '2024-02-10T14:15:00',
    readCount: 3125,
    likes: 412,
    mainImage: 'https://picsum.photos/seed/cat1/800/450',
    content: `
      <h2>一、猫咪的常见健康问题</h2>
      <p>猫咪虽然相对独立，但也容易受到各种健康问题的困扰。以下是一些常见的猫咪健康问题及其预防措施：</p>
      
      <h2>二、消化系统问题</h2>
      <p>猫咪常见的消化系统问题包括呕吐、腹泻和便秘：</p>
      <ul>
        <li>保持饮食稳定，避免突然更换猫粮</li>
        <li>提供高纤维食物，促进肠道健康</li>
        <li>确保猫咪有充足的清洁饮用水</li>
        <li>避免喂食人类食物，特别是油腻、辛辣或有毒的食物</li>
      </ul>
      
      <h2>三、泌尿系统疾病</h2>
      <p>泌尿系统疾病在猫咪中较为常见，尤其是公猫：</p>
      <ul>
        <li>提供充足的清洁饮用水</li>
        <li>考虑使用湿粮，增加猫咪的水分摄入量</li>
        <li>保持猫砂盆清洁，每天至少清理一次</li>
        <li>定期带猫咪进行尿液检查</li>
      </ul>
      
      <h2>四、口腔健康</h2>
      <p>口腔疾病在猫咪中非常普遍，但往往被忽视：</p>
      <ul>
        <li>定期检查猫咪的牙齿和牙龈</li>
        <li>使用专门的猫咪牙膏和牙刷进行口腔清洁</li>
        <li>提供咀嚼玩具或洁牙零食</li>
        <li>定期带猫咪进行口腔检查</li>
      </ul>
    `
  },
  '3': {
    id: '3',
    title: '如何正确训练幼犬的基本指令',
    categoryId: 'training',
    publishDate: '2024-03-05T09:45:00',
    readCount: 1876,
    likes: 289,
    mainImage: 'https://picsum.photos/seed/puppy1/800/450',
    content: `
      <h2>一、训练幼犬的黄金时期</h2>
      <p>幼犬的最佳训练时期是在8周到6个月之间，这是它们学习能力最强的阶段。早期训练可以帮助幼犬建立良好的行为习惯，促进与主人的沟通和理解。</p>
      
      <h2>二、基础指令训练</h2>
      <p>以下是一些基本指令的训练方法：</p>
      
      <h3>1. "坐下"指令</h3>
      <ul>
        <li>手持零食，让幼犬看到但够不到</li>
        <li>将零食从幼犬的鼻子上方慢慢移到头部后方</li>
        <li>当幼犬的臀部自然下沉时，发出"坐下"的指令</li>
        <li>幼犬坐下后，立即给予奖励和表扬</li>
        <li>重复训练，直到幼犬听到指令后能迅速坐下</li>
      </ul>
      
      <h3>2. "握手"指令</h3>
      <ul>
        <li>先让幼犬学会"坐下"指令</li>
        <li>轻轻抬起幼犬的前爪，同时发出"握手"的指令</li>
        <li>握住幼犬的爪子片刻后松开，并给予奖励和表扬</li>
        <li>重复训练，逐渐减少辅助，直到幼犬能主动伸出爪子</li>
      </ul>
      
      <h3>3. "趴下"指令</h3>
      <ul>
        <li>先让幼犬坐下</li>
        <li>手持零食，从幼犬的鼻子前方慢慢向下移动</li>
        <li>当幼犬的身体自然向下趴伏时，发出"趴下"的指令</li>
        <li>给予奖励和表扬</li>
        <li>重复训练，直到幼犬听到指令后能迅速趴下</li>
      </ul>
    `
  }
}

// 获取文章数据
const fetchArticleData = () => {
  // 在实际应用中，这里应该从API获取数据
  // 这里使用模拟数据
  if (mockArticles[articleId]) {
    article.value = { ...mockArticles[articleId] }
    
    // 获取相关文章
    relatedArticles.value = Object.values(mockArticles)
      .filter(a => a.id !== articleId && a.categoryId === article.value.categoryId)
      .slice(0, 3)
  } else {
    // 如果找不到文章，设置默认值
    article.value = {
      id: articleId,
      title: '文章不存在',
      categoryId: 'diet',
      publishDate: new Date().toISOString(),
      readCount: 0,
      likes: 0,
      mainImage: 'https://picsum.photos/seed/default/800/450',
      content: '<p>抱歉，您访问的文章不存在或已被删除。</p>'
    }
  }
}

// 获取分类名称
const getCategoryName = () => {
  const category = categories.find(c => c.id === article.value.categoryId)
  return category ? category.name : '未分类'
}

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}

// 返回上一页
const goBack = () => {
  router.back()
}

// 点赞功能
const handleLike = () => {
  article.value.likes++
}

// 收藏功能
const handleCollect = () => {
  alert('文章已收藏！')
}

// 分享功能
const handleShare = () => {
  alert('分享链接已复制到剪贴板！')
}

// 页面加载时获取数据
onMounted(() => {
  fetchArticleData()
})
</script>

<style scoped>
.pet-knowledge-article {
  min-height: 100vh;
  background-color: #f0f4f8;
  font-family: 'Press Start 2P', 'Arial', sans-serif;
  padding: 20px;
}

/* 页面头部 */
.article-header {
  text-align: center;
  margin-bottom: 30px;
  position: relative;
}

.back-button {
  position: absolute;
  left: 0;
  top: 0;
  background-color: #ff6b6b;
  color: white;
  border: 4px solid #000;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.back-button:hover {
  background-color: #ff5252;
  transform: translateY(-2px);
}

.article-title {
  font-size: 24px;
  color: #333;
  margin: 20px 0;
  line-height: 1.5;
  text-shadow: 2px 2px 0 #fff, 4px 4px 0 #000;
}

/* 文章内容 */
.article-content {
  max-width: 1000px;
  margin: 0 auto;
  background-color: white;
  border: 4px solid #000;
  padding: 30px;
  box-shadow: 8px 8px 0 rgba(0, 0, 0, 0.2);
}

/* 文章元信息 */
.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 2px dashed #ccc;
}

.category-tag {
  background-color: #4ecdc4;
  color: white;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  border: 2px solid #000;
}

.publish-date,
.read-count {
  color: #666;
  font-size: 12px;
}

/* 文章主图 */
.article-main-image {
  margin: 30px 0;
  text-align: center;
}

.article-main-image img {
  max-width: 100%;
  height: auto;
  border: 4px solid #000;
}

/* 文章正文 */
.article-body {
  font-size: 16px;
  line-height: 1.8;
  color: #333;
}

.article-body h2 {
  font-size: 20px;
  margin-top: 30px;
  margin-bottom: 15px;
  color: #ff6b6b;
  text-shadow: 1px 1px 0 #000;
}

.article-body h3 {
  font-size: 18px;
  margin-top: 25px;
  margin-bottom: 10px;
  color: #4ecdc4;
}

.article-body p {
  margin-bottom: 15px;
}

.article-body ul {
  margin-bottom: 20px;
  padding-left: 25px;
}

.article-body li {
  margin-bottom: 8px;
  list-style-type: none;
  position: relative;
  padding-left: 25px;
}

.article-body li:before {
  content: '▹';
  position: absolute;
  left: 0;
  color: #ff6b6b;
}

/* 温馨提示 */
.article-tips {
  background-color: #fff3cd;
  padding: 20px;
  margin: 30px 0;
  border: 4px solid #000;
}

.tips-title {
  font-size: 16px;
  margin-bottom: 10px;
  color: #856404;
}

.tips-content {
  font-size: 14px;
  color: #856404;
}

/* 相关文章 */
.related-articles {
  margin-top: 40px;
}

.related-title {
  font-size: 18px;
  margin-bottom: 20px;
  color: #4ecdc4;
  text-shadow: 1px 1px 0 #000;
}

.related-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.related-item {
  background-color: #f8f9fa;
  transition: all 0.2s;
}

.related-item:hover {
  transform: translateY(-5px);
  box-shadow: 5px 5px 0 rgba(0, 0, 0, 0.2);
}

.related-link {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: inherit;
}

.related-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  margin-bottom: 10px;
  border: 2px solid #000;
}

.related-info {
  text-align: left;
}

.related-item-title {
  font-size: 14px;
  margin-bottom: 5px;
  color: #333;
  line-height: 1.4;
}

.related-date {
  font-size: 12px;
  color: #666;
}

/* 底部操作栏 */
.article-footer {
  max-width: 1000px;
  margin: 30px auto 0;
  text-align: center;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.action-button {
  background-color: #45b7d1;
  color: white;
  border: 4px solid #000;
  padding: 12px 24px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.action-button:hover {
  background-color: #39a0b9;
  transform: translateY(-2px);
}

.like-btn {
  background-color: #ff6b6b;
}

.like-btn:hover {
  background-color: #ff5252;
}

.collect-btn {
  background-color: #ffd93d;
  color: #333;
}

.collect-btn:hover {
  background-color: #ffc812;
}

.share-btn {
  background-color: #6bcb77;
}

.share-btn:hover {
  background-color: #5ab462;
}

.pixel-icon {
  margin-right: 5px;
}

.pixel-border {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pet-knowledge-article {
    padding: 10px;
  }
  
  .article-title {
    font-size: 20px;
    margin-top: 60px;
  }
  
  .article-content {
    padding: 20px;
  }
  
  .article-body {
    font-size: 14px;
  }
  
  .article-body h2 {
    font-size: 18px;
  }
  
  .back-button {
    font-size: 12px;
    padding: 8px 16px;
  }
  
  .action-button {
    font-size: 12px;
    padding: 10px 20px;
  }
}

@media (max-width: 480px) {
  .article-title {
    font-size: 18px;
  }
  
  .article-meta {
    flex-direction: column;
    gap: 8px;
  }
  
  .related-list {
    grid-template-columns: 1fr;
  }
  
  .action-buttons {
    flex-direction: column;
    align-items: center;
  }
}
</style>